<template>
  <div class="main">
<!--    <van-sticky>-->
      <div class="nav">
        <img :src="back" alt="" @click="handleBack"/>
        <div class="title">意见反馈</div>
      </div>
<!--    </van-sticky>-->
    <div class="body">
      <van-field
      
          v-model.trim="message"
          rows="12"
          autosize
          type="textarea"
          maxlength="1000"
          placeholder="请输入"
          show-word-limit
          :border="false"
          ref="theTextarea"
      />
    </div>
    <div class="footer">
      <div class="size" @click="submit">提交</div>
    </div>
  </div>
</template>

<script>
import {getFeedback} from "../../../api/my";

export default {
  name: "freeBack",
  data() {
    return {
      back: require("@/assets/my/back.png"),
      setImg: require("@/assets/my/set-icon.png"),
      message: ''
    }
  },
  methods: {
    handleBack() {
      let message = {
        action: 'showBottom',
        param: {}
      }
      getInfoFromVue.postMessage(JSON.stringify(message))
      this.$router.go(-1);
    },
    submit() {
      let data = {
        content: this.message
      }
      if (this.message) {
          getFeedback(data).then(res => {
          if (res.success == true) {
            this.$toast.success('提交成功')
            this.$router.go(-1)
            let message = {
              action: 'showBottom',
              param: {}
            }
            getInfoFromVue.postMessage(JSON.stringify(message))
          }
        })
      } else{
        this.$toast('反馈内容不能为空')
      }
    }
  }
}
</script>

<style scoped lang="less">
.main {
  height: 100vh;
  padding: 0px 15px;

  .nav {
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    .title{
      font-size: 20px;
      font-weight: 500;
    }
    > img {
      width: 10px;
      height: 16px;
      position: absolute;
      left: 15px;
    }
  }

  .body {
    //padding-top: 30px;
    // /deep/ .van-field__body {
    //   height: 295px;
    //   opacity: 1;
    //   border-radius: 13px;
    //   border: 1px solid rgba(242, 150, 0, 1);
    // }

    /deep/ .van-field__control {
      overflow: scroll;
      padding: 20px 10px !important;
      border-radius: 13px;
      border: 1px solid rgba(242, 150, 0, 1);
      font-size: 17px;
      height: 300px!important;
    }
    /deep/.van-field__word-limit {
      font-size: 17px;
    }
  }

  .footer {
    display: flex;
    justify-content: center;
    margin-top: 50px;

    .size {
      width: 141px;
      height: 38px;
      opacity: 1;
      border-radius: 19px;
      background: rgba(242, 150, 0, 1);
      font-size: 23px;
      font-weight: 500;
      line-height: 38px;
      color: rgba(255, 255, 255, 1);
      text-align: center;
      vertical-align: top;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>